<template>
  <div class="modern-search-container">
   <!-- 操作按钮 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" @click="handleUpdate"
          v-hasPermi="['aiexperiments:experiment:edit']">更新数据</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini"  @click="handleDelete"
          v-hasPermi="['aiexperiments:experiment:remove']">清空数据</el-button>
      </el-col>
    </el-row>
    <!-- 头部区域 -->
    <div class="header-section">
      <div class="brand">
        <img src="@/assets/logo/logo.png" alt="logo" class="brand-logo"/>
        <h1 class="brand-title">智能搜索平台</h1>
      </div>
    </div>

    <!-- 搜索区域 -->
    <div class="search-section">
      <div class="search-wrapper">
        <el-autocomplete
          v-model="searchText"
          :fetch-suggestions="querySearchAsync"
          placeholder="搜索实验或算法..."
          class="modern-search"
          clearable
          popper-class="modern-autocomplete"
          @select="handleSelect"
          @keyup.enter.native="handleSearch"
          :trigger-on-focus="false"
        >
          <template slot="prefix">
            <i class="el-icon-search search-icon"></i>
          </template>
          <template slot="suffix">
            <el-button 
              class="modern-search-btn"
              @click="handleSearch"
            >搜索</el-button>
          </template>
          <template slot-scope="{ item }">
            <div class="modern-suggestion-item">
              <div class="content">
                <div class="title">
                  <span>{{ item.value }}</span>
                </div>
                <div class="meta">
                  <span class="description" v-if="item.data">
                    {{ item.data }}
                  </span>
                </div>
              </div>
            </div>
          </template>
        </el-autocomplete>
      </div>
    </div>

    <!-- 快捷功能区域 -->
    <div class="shortcuts-section">
      <div class="section-title">快捷功能</div>
      <div class="shortcuts-grid">
        <div 
          v-for="(item, index) in shortcuts" 
          :key="index"
          class="shortcut-item"
          @click="goTarget(item.link)"
        >
          <div class="shortcut-icon">
            <i :class="item.icon"></i>
          </div>
          <div class="shortcut-info">
            <div class="shortcut-name">{{ item.name }}</div>
            <div class="shortcut-desc">{{ item.description }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { findData,saveData,deleteData } from '@/api/aiexperiments/baidu'

export default {
  name: 'Index',
  data() {
    return {
      searchText: '',
      shortcuts: [
        { 
          name: 'nacos', 
          icon: 'el-icon-setting', 
          link: 'http://localhost:8848/nacos/',
          description: '系统配置管理'
        },
        { 
          name: '监控中心', 
          icon: 'el-icon-monitor', 
          link: '/monitor',
          description: '系统运行状态监控'
        },
        { 
          name: '任务调度', 
          icon: 'el-icon-timer', 
          link: '/job',
          description: '定时任务管理'
        },
        { 
          name: '开发工具', 
          icon: 'el-icon-tools', 
          link: '/tool',
          description: '常用开发工具集'
        }
      ]
    }
  },
  methods: {
    // 获取搜索建议
    querySearchAsync(queryString, callback) {
      if (queryString.trim() === '') {
        callback([])
        return
      }

      findData(queryString).then(response => {
        const { data } = response
        const { experiments = [], algorithms = [],acaexperiments = [],animals = [] } = data
        
        const suggestions = [
          ...experiments.map(item => ({
            value: item.experimentName,
            data: {
              id: item.id,
              name: item.experimentName,
              description: item.experimentType || '暂无描述',
              createTime: item.createTime
            }
          })),
          ...algorithms.map(item => ({
            value: item.algorithmName,
            data: {
              id: item.id,
              name: item.algorithmName,
              description: item.description || '暂无描述',
              createTime: item.createTime
            }
          })),
           ...acaexperiments.map(item => ({
            value: item.experimentName,
            data: {
              id: item.id,
              name: item.experimentName,
              description: item.principalInvestigator || '暂无描述',
              createTime: item.createTime
            }
          })),
          ...animals.map(item => ({
            value: item.speciesName,
            data: {
              id: item.id,
              name: item.speciesName,
              description: item.breedName || '暂无描述',
              createTime: item.createTime
            }
          }))
        ]
        
        callback(suggestions)
      }).catch(error => {
        console.error('搜索失败:', error)
        callback([])
      })
    },

    // 选择搜索建议
    handleSelect(item) {
      this.searchText = item.value
      this.$router.push(`/detail/${item.data.id}`)
    },
    handleUpdate(){
      saveData().then(response => {
        this.$message.success('数据更新成功')
      }).catch(error => {
        this.$message.error('数据更新失败')
      })
    },
    handleDelete(){
      deleteData().then(response => {
        this.$message.success('数据删除成功')
      }).catch(error => {
        this.$message.error('数据删除失败')
      })
    },
    // 执行搜索
    handleSearch() {
      if (this.searchText.trim()) {
        findData(this.searchText).then(response => {
          this.$router.push({
            path: '/search/result',
            query: {
              keyword: this.searchText
            }
          })
        }).catch(error => {
          this.$message.error('搜索失败，请稍后重试')
        })
      } else {
        this.$message.warning('请输入搜索内容')
      }
    },

    goTarget(path) {
      window.open(path, '_blank');
    }
  }
}
</script>

<style lang="scss">
// 全局样式覆盖
.el-autocomplete {
  display: block !important;
  width: 100%;
}

// 修改下拉菜单样式
.modern-autocomplete {
  
  max-width: 800px !important;  // 与搜索区域最大宽度一致
  margin: 0 auto !important;

  &.el-popper[x-placement^=bottom] {
    margin-top: 8px !important;
  }
}
</style>

<style lang="scss" scoped>
.modern-search-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
  padding: 0 20px;

  .header-section {
    padding: 40px 0;
    text-align: center;

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 20px;

      .brand-logo {
        height: 60px;
        transition: transform 0.3s ease;
        
        &:hover {
          transform: scale(1.05);
        }
      }

      .brand-title {
        font-size: 32px;
        color: #2c3e50;
        margin: 0;
        font-weight: 600;
      }
    }
  }

  .search-section {
    width: 70%;  // 设置搜索区域宽度
    max-width: 800px;
    margin: 0 auto 60px;
    padding: 0 20px;
    position: relative;  // 添加相对定位

    .search-wrapper {
      width: 100%;  // 确保包装器占满容器宽度
      background: white;
      border-radius: 16px;
      padding: 30px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

      :deep(.modern-search) {
        display: block !important;
        width: 100%;

        .el-input {
          display: block;
          width: 100%;
        }

        .el-input__inner {
          width: 100%;
          height: 60px;
          border: 2px solid #ebeef5;
          border-radius: 12px;
          padding: 0 140px 0 50px;
          font-size: 16px;
          transition: all 0.3s ease;

          &:hover, &:focus {
            border-color: #409eff;
            box-shadow: 0 0 0 4px rgba(64, 158, 255, 0.1);
          }
        }

        .el-input__prefix {
          left: 20px;
          height: 100%;
          display: flex;
          align-items: center;
          
          .search-icon {
            font-size: 20px;
            color: #909399;
          }
        }

        .el-input__suffix {
          right: 10px;
          height: 100%;
          display: flex;
          align-items: center;
        }
      }

      .modern-search-btn {
        height: 44px;
        padding: 0 30px;
        margin: 8px;
        border-radius: 8px;
        background: #409eff;
        border: none;
        color: white;
        font-size: 16px;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
          background: #66b1ff;
        }
      }
    }
  }

  .shortcuts-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;

    .section-title {
      font-size: 24px;
      color: #2c3e50;
      margin-bottom: 30px;
      font-weight: 600;
      text-align: center;
    }

    .shortcuts-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
      
      .shortcut-item {
        background: white;
        border-radius: 12px;
        padding: 24px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 20px;
        transition: all 0.3s ease;
        
        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);

          .shortcut-icon i {
            transform: scale(1.1);
            color: #409eff;
          }
        }

        .shortcut-icon {
          width: 50px;
          height: 50px;
          border-radius: 12px;
          background: #f0f2f5;
          display: flex;
          align-items: center;
          justify-content: center;

          i {
            font-size: 24px;
            color: #606266;
            transition: all 0.3s ease;
          }
        }

        .shortcut-info {
          flex: 1;

          .shortcut-name {
            font-size: 16px;
            color: #303133;
            margin-bottom: 4px;
            font-weight: 500;
          }

          .shortcut-desc {
            font-size: 14px;
            color: #909399;
          }
        }
      }
    }
  }
}

:deep(.modern-autocomplete) {
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  padding: 8px;

  .modern-suggestion-item {
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;

    &:hover {
      background-color: #f5f7fa;
    }

    .content {
      .title {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;

        i {
          font-size: 16px;
          color: #409eff;
        }

        span {
          font-size: 14px;
          color: #303133;
          font-weight: 500;
        }
      }

      .meta {
        display: flex;
        align-items: center;
        gap: 8px;

        .description {
          font-size: 12px;
          color: #909399;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}

:deep(.el-autocomplete-suggestion) {
  width: 100% !important;
  margin-top: 8px;

  &.el-popper[x-placement^=bottom] {
    margin-top: 8px;
  }

  .el-scrollbar {
    width: 100%;
  }

  .el-scrollbar__wrap {
    width: 100%;
  }

  .el-scrollbar__view {
    width: 100%;
  }
}
</style>
